<template>
    <div>
        <!-- 线段和曲线 -->
        <div v-if="props.type == '1'">
            <li class="editorformItem">
                <div class="editorformItemName">线型</div>
                <div class="editorformItemFunc">
                    <el-select v-model="style.materialType" class="editorforminput" @change="changeStyle('materialType', style.materialType)">
                        <el-option v-for="opt in options.options1" :key="opt.value" :label="opt.label" :value="opt.value" />
                    </el-select>
                </div>
            </li>
            <!-- 通用 实线和箭头只有颜色选项 -->
            <li class="editorformItem">
                <div class="editorformItemName">颜色</div>
                <div class="editorformItemFunc">
                    <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('color', style.materialOptions.color)" show-alpha class="editorforminput" v-model="style.materialOptions.color" />
                </div>
            </li>
            <!-- 虚线 -->
            <div v-if="style.materialType == 'PolylineDash'">
                <li class="editorformItem">
                    <div class="editorformItemName">间隔颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('gapColor', style.materialOptions.gapColor)" show-alpha class="editorforminput" v-model="style.materialOptions.gapColor" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">虚线间长</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.materialOptions.dashLength" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('dashLength', style.materialOptions.dashLength)" />
                    </div>
                </li>
            </div>
            <!-- 衬色线 -->
            <div v-if="style.materialType == 'PolylineOutline'">
                <li class="editorformItem">
                    <div class="editorformItemName">衬色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('outlineColor', style.materialOptions.outlineColor)" show-alpha class="editorforminput" v-model="style.materialOptions.outlineColor" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">衬色宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.materialOptions.outlineWidth"
                            class="editorforminput"
                            :step="0.1"
                            controls-position="right"
                            :min="0"
                            @input="changeEaterialOptions('outlineWidth', style.materialOptions.outlineWidth)"
                        />
                    </div>
                </li>
            </div>

            <!-- OD线 -->
            <div v-if="style.materialType == 'ODLine'">
                <li class="editorformItem">
                    <div class="editorformItemName">背景颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('bgColor', style.materialOptions.bgColor)" show-alpha class="editorforminput" v-model="style.materialOptions.bgColor" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">速度</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="style.materialOptions.speed" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('speed', style.materialOptions.speed)" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">运动形式</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.materialOptions.bidirectional" class="editorforminput" @change="changeEaterialOptions('bidirectional', style.materialOptions.bidirectional)">
                            <el-option label="正向运动" :value="0" />
                            <el-option label="反向运动" :value="1" />
                            <el-option label="双向运动" :value="2" />
                        </el-select>
                    </div>
                </li>
            </div>
        </div>
        <!-- 管道 -->
        <div v-if="props.type == '2'">
            <li class="editorformItem">
                <div class="editorformItemName">线型</div>
                <div class="editorformItemFunc">
                    <el-select v-model="style.shape" class="editorforminput" @change="changeStyle('shape', style.shape)">
                        <el-option label="空心管" value="pipeline" />
                        <el-option label="实心管" value="circle" />
                    </el-select>
                </div>
            </li>
            <li class="editorformItem">
                <div class="editorformItemName">半径</div>
                <div class="editorformItemFunc">
                    <el-input-number v-model="style.radius" class="editorforminput" :step="0.1" controls-position="right" :min="0.1" @input="changeStyle('radius', style.radius)" />
                </div>
            </li>
            <!-- 空心管 -->
            <li class="editorformItem" v-if="style.shape == 'pipeline'">
                <div class="editorformItemName">厚度</div>
                <div class="editorformItemFunc">
                    <el-input-number v-model="style.thicknes" class="editorforminput" :step="0.1" controls-position="right" :min="0.1" @input="changeStyle('thicknes', style.thicknes)" />
                </div>
            </li>
            <li class="editorformItem">
                <div class="editorformItemName">边线边数</div>
                <div class="editorformItemFunc">
                    <el-input-number v-model="style.slices" class="editorforminput" :step="0.1" controls-position="right" :min="0.1" @input="changeStyle('slices', style.slices)" />
                </div>
            </li>
            <li class="editorformItem">
                <div class="editorformItemName">开始角度</div>
                <div class="editorformItemFunc">
                    <el-slider v-model="style.startAngle" @input="changeStyle('startAngle', style.startAngle)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                </div>
            </li>
        </div>

        <div v-if="style.fill">
            <!-- 纯色+网格 围栏 -->
            <div v-if="props.type == '3'">
                <li class="editorformItem">
                    <div class="editorformItemName">填充材质</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.materialType" class="editorforminput" @change="changeStyle('materialType', style.materialType)">
                            <el-option v-for="(item, index) in options.options2" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </li>
                <!-- 纯色 -->
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('color', style.materialOptions.color)" show-alpha class="editorforminput" v-model="style.materialOptions.color" />
                    </div>
                </li>
                <!-- 网格 -->
                <div v-if="style.materialType == 'Grid'">
                    <li class="editorformItem">
                        <div class="editorformItemName">填充透明度</div>
                        <div class="editorformItemFunc">
                            <el-slider v-model="style.materialOptions.cellAlpha" @input="changeEaterialOptions('cellAlpha', style.materialOptions.cellAlpha)" :min="0" :max="1" :step="0.1" class="editorformItemslider" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">网格数量</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.lineCount" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('lineCount', style.materialOptions.lineCount)" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">网格宽度</div>
                        <div class="editorformItemFunc">
                            <el-input-number
                                v-model="style.materialOptions.lineThickness"
                                class="editorforminput"
                                :step="0.1"
                                controls-position="right"
                                :min="0"
                                @input="changeEaterialOptions('lineThickness', style.materialOptions.lineThickness)"
                            />
                        </div>
                    </li>
                </div>
            </div>
            <!-- 纯色+放大扩散线+波纹扩散 -->
            <div v-if="props.type == '4'">
                <li class="editorformItem">
                    <div class="editorformItemName">填充材质</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.materialType" class="editorforminput" @change="changeStyle('materialType', style.materialType)">
                            <el-option v-for="(item, index) in options.options3" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </li>
                <!-- 纯色 -->
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('color', style.materialOptions.color)" show-alpha class="editorforminput" v-model="style.materialOptions.color" />
                    </div>
                </li>
                <!-- 放大扩散线 -->
                <div v-if="style.materialType == 'ScanLine'">
                    <li class="editorformItem">
                        <div class="editorformItemName">速度</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.speed" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('speed', style.materialOptions.speed)" />
                        </div>
                    </li>
                </div>
                <!-- 波纹扩散 -->
                <div v-if="style.materialType == 'CircleWave'">
                    <li class="editorformItem">
                        <div class="editorformItemName">数量</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.count" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('count', style.materialOptions.count)" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">圈间系数</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.gradient" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('gradient', style.materialOptions.gradient)" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">速度</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.speed" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('speed', style.materialOptions.speed)" />
                        </div>
                    </li>
                </div>
            </div>
            <!-- 纯色+棋盘 -->
            <div v-if="props.type == '5'">
                <li class="editorformItem">
                    <div class="editorformItemName">填充材质</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="style.materialType" class="editorforminput" @change="changeStyle('materialType', style.materialType)">
                            <el-option v-for="(item, index) in options.options4" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </li>
                <!-- 纯色 -->
                <li class="editorformItem" v-if="style.materialType == 'Color'">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('color', style.materialOptions.color)" show-alpha class="editorforminput" v-model="style.materialOptions.color" />
                    </div>
                </li>
                <!-- 棋盘 -->
                <div v-else>
                    <li class="editorformItem">
                        <div class="editorformItemName">主色</div>
                        <div class="editorformItemFunc">
                            <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('evenColor', style.materialOptions.evenColor)" show-alpha class="editorforminput" v-model="style.materialOptions.evenColor" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">衬色</div>
                        <div class="editorformItemFunc">
                            <el-color-picker :predefine="defaultColor" @change="changeEaterialOptions('oddColor', style.materialOptions.oddColor)" show-alpha class="editorforminput" v-model="style.materialOptions.oddColor" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">数量</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="style.materialOptions.repeat" class="editorforminput" :step="0.1" controls-position="right" :min="0" @input="changeEaterialOptions('repeat', style.materialOptions.repeat)" />
                        </div>
                    </li>
                </div>
            </div>
        </div>

        <!-- 是否边框 -->
        <!-- <div v-if="props.outline">
            <li class="editorformItem">
                <div class="editorformItemName">是否边框</div>
                <div class="editorformItemFunc">
                    <el-switch v-model="style.outline" @change="change2('outline')" style="--el-switch-on-color: rgba(32, 160, 255)" />
                </div>
            </li>
            <li class="editorformItem" v-if="style.outline">
                <div class="editorformItemName">边框颜色</div>
                <div class="editorformItemFunc">
                    <el-color-picker
                        :predefine="defaultColor"
                        @change="change2('defaultColor')"
                        show-alpha
                        class="editorforminput"
                        v-model="style.outlineColor"
                    />
                </div>
            </li>
            <li class="editorformItem" v-if="style.outline">
                <div class="editorformItemName">边框宽度</div>
                <div class="editorformItemFunc">
                    <el-input-number
                        v-model="style.outlineWidth"
                        @input="change2('outlineWidth')"
                        class="editorforminput"
                        :step="1"
                        conliols-position="right"
                        :min="1"
                    />
                </div>
            </li>
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import { defaultColor } from "@/config/config";
import * as lodash from "lodash";
interface Props {
    graphic?: any;
    type?: string;
    outline?: boolean;
    fill?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {} as any,
    type: "1",
    outline: true,
    fill: true,
});
let layer: any = reactive({});
layer = computed(() => {
    return props.graphic;
});
const style: any = reactive(layer.value.style);
const changeStyle = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "materialType":
                setTimeout(() => {
                    props.graphic.setStyle({ materialType: val });
                    initChangeEaterialOptions(val);
                }, 100);
                break;
            case "shape":
                props.graphic.setStyle({ shape: val });
                break;
            case "radius":
                props.graphic.setStyle({ radius: val });
                break;
            case "thicknes":
                props.graphic.setStyle({ thicknes: val });
                break;
            case "slices":
                props.graphic.setStyle({ slices: val });
                break;
            case "startAngle":
                props.graphic.setStyle({ startAngle: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
const changeEaterialOptions = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "color":
                props.graphic.setStyle({ materialOptions: { color: val } });
                break;
            case "gapColor":
                props.graphic.setStyle({ materialOptions: { gapColor: val } });
                break;
            case "dashLength":
                props.graphic.setStyle({ materialOptions: { dashLength: val } });
                break;
            case "outlineColor":
                props.graphic.setStyle({ materialOptions: { outlineColor: val } });
                break;
            case "outlineWidth":
                props.graphic.setStyle({ materialOptions: { outlineWidth: val } });
                break;
            case "bgColor":
                props.graphic.setStyle({ materialOptions: { bgColor: val } });
                break;
            case "speed":
                props.graphic.setStyle({ materialOptions: { speed: val } });
                break;
            case "bidirectional":
                console.log(opt, val);
                props.graphic.setStyle({ materialOptions: { bidirectional: val } });
                break;
            case "cellAlpha":
                props.graphic.setStyle({ materialOptions: { cellAlpha: val } });
                break;
            case "lineCount":
                props.graphic.setStyle({ materialOptions: { lineCount: val } });
                break;
            case "lineThickness":
                props.graphic.setStyle({ materialOptions: { lineThickness: val } });
                break;
            case "count":
                props.graphic.setStyle({ materialOptions: { count: val } });
                break;
            case "gradient":
                props.graphic.setStyle({ materialOptions: { gradient: val } });
                break;
            case "evenColor":
                props.graphic.setStyle({ materialOptions: { evenColor: val } });
                break;
            case "oddColor":
                props.graphic.setStyle({ materialOptions: { oddColor: val } });
                break;
            case "repeat":
                props.graphic.setStyle({ materialOptions: { repeat: val } });
                break;
            default:
                props.graphic.setStyle({ materialOptions: style.materialOptions });
        }
    }, 100);
};
const initChangeEaterialOptions = (type: string) => {
    let textureStyle = lodash.cloneDeep(fillTypeStyle[type]);
    // textureStyle.color = style.materialOptions ? style.materialOptions.color : style.color;
    style.materialOptions = textureStyle;
    Object.keys(textureStyle).forEach((s: string) => {
        setTimeout(() => {
            switch (s) {
                case "color":
                    props.graphic.setStyle({ materialOptions: { color: textureStyle.color } });
                    break;
                case "gapColor":
                    props.graphic.setStyle({ materialOptions: { gapColor: textureStyle.gapColor } });
                    break;
                case "dashLength":
                    props.graphic.setStyle({ materialOptions: { dashLength: textureStyle.dashLength } });
                    break;
                case "outlineColor":
                    props.graphic.setStyle({ materialOptions: { outlineColor: textureStyle.outlineColor } });
                    break;
                case "outlineWidth":
                    props.graphic.setStyle({ materialOptions: { outlineWidth: textureStyle.outlineWidth } });
                    break;
                case "bgColor":
                    props.graphic.setStyle({ materialOptions: { bgColor: textureStyle.bgColor } });
                    break;
                case "speed":
                    props.graphic.setStyle({ materialOptions: { speed: textureStyle.speed } });
                    break;
                case "bidirectional":
                    props.graphic.setStyle({ materialOptions: { bidirectional: textureStyle.bidirectional } });
                    break;
                case "cellAlpha":
                    props.graphic.setStyle({ materialOptions: { cellAlpha: textureStyle.cellAlpha } });
                    break;
                case "lineCount":
                    props.graphic.setStyle({ materialOptions: { lineCount: textureStyle.lineCount } });
                    break;
                case "lineThickness":
                    props.graphic.setStyle({ materialOptions: { lineThickness: textureStyle.lineThickness } });
                    break;
                case "count":
                    props.graphic.setStyle({ materialOptions: { count: textureStyle.count } });
                    break;
                case "gradient":
                    props.graphic.setStyle({ materialOptions: { gradient: textureStyle.gradient } });
                    break;
                case "evenColor":
                    props.graphic.setStyle({ materialOptions: { evenColor: textureStyle.evenColor } });
                    break;
                case "oddColor":
                    props.graphic.setStyle({ materialOptions: { oddColor: textureStyle.oddColor } });
                    break;
                case "repeat":
                    props.graphic.setStyle({ materialOptions: { repeat: textureStyle.repeat } });
                    break;
                default:
                    props.graphic.setStyle({ materialOptions: textureStyle });
            }
        }, 100);
    });
    console.log(style);
};

const options: any = reactive({
    options1: [
        {
            label: "实线",
            value: "Color",
        },
        {
            label: "虚线",
            value: "PolylineDash",
        },
        {
            label: "衬色线",
            value: "PolylineOutline",
        },
        {
            label: "箭头",
            value: "PolylineArrow",
        },
        {
            label: "OD线",
            value: "ODLine",
        },
    ],
    options2: [
        {
            label: "纯色",
            value: "Color",
        },
        {
            label: "网格",
            value: "Grid",
        },
    ],
    options3: [
        {
            label: "纯色",
            value: "Color",
        },
        {
            label: "放大扩散线",
            value: "ScanLine",
        },
        {
            label: "波纹扩散",
            value: "CircleWave",
        },
        // {
        //     label: "电弧球体",
        //     value: "EllipsoidElectric",
        // },
        // {
        //     label: "波纹球体",
        //     value: "EllipsoidWave",
        // },
    ],
    options4: [
        {
            label: "纯色",
            value: "Color",
        },
        {
            label: "棋盘",
            value: "Checkerboard",
        },
    ],
});
/**
 * 填充类型样式
 */
const fillTypeStyle: any = reactive({
    // 实线 纯色
    Color: {
        color: "rgba(0,129,194,1)", // 颜色
    },
    // 虚线
    PolylineDash: {
        color: "rgba(0,129,194,1)", // 颜色
        gapColor: "rgba(1,1,1,0)", // 虚线间隔颜色，默认为透明
        dashLength: 16, // 虚线间隔长度，以像素为单位
    },
    // 衬色线
    PolylineOutline: {
        color: "rgba(0,129,194,1)", // 颜色
        outlineColor: "#ffffff", // 衬色颜色
        outlineWidth: 1, // 衬色宽度，以像素为单位
    },
    // 箭头
    PolylineArrow: {
        color: "rgba(0,129,194,1)", // 颜色
    },
    // OD线
    ODLine: {
        color: "rgba(0,129,194,1)", // 颜色
        bgColor: "rgba(0,0,0,7)", // 线的背景颜色
        speed: 20, // 速度，值越大越快
        bidirectional: 0, // 运行形式,可选值：0 正向运动 1 反向运动 2 双向运动
    },
    // 网格
    Grid: {
        color: "rgba(0,129,194,1)",
        cellAlpha: 0.1,
        lineCount: 10,
        lineThickness: 1,
    },
    //  放大扩散线
    ScanLine: {
        color: "rgba(0,129,194,1)",
        speed: 10, // 速度
    },
    // 波纹扩散
    CircleWave: {
        color: "rgba(0,129,194,1)",
        speed: 10, // 速度
        count: 2, // 圆圈个数
        gradient: 0.1, // 透明度的幂方（0-1）,0表示无虚化效果，1表示虚化成均匀渐变
    },
    //  电弧球体
    EllipsoidElectric: {
        color: "rgba(0,129,194,1)",
        speed: 10, // 速度
    },
    // 波纹球体
    EllipsoidWave: {
        color: "rgba(0,129,194,1)",
        speed: 10, // 速度
    },
    // 棋盘
    Checkerboard: {
        evenColor: "rgba(0,129,194,1)", // 主色
        oddColor: "#F0F000", // 衬色，棋盘中另外一个颜色
        repeat: 10, // 数量，在每个方向重复的次数
    },
});
</script>
